import React, { PropTypes, Component } from 'react'
import {Card,  CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';

class ImageModal extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      expanded: false,
      imageList:[
        {
           id:1,
          'des':'测试图片一',
          'logoImageSrc':'http://image.tianjimedia.com/uploadImages/2012/010/XC4Y39BYZT9A.jpg',
          'trueImageSrc':'http://image.tianjimedia.com/uploadImages/2012/010/XC4Y39BYZT9A.jpg',
          'title':'沙漠风格',
          'expanded':false
        },
        {
          'id':2,
          'des':'测试图片二',
          'logoImageSrc':'http://dl.bizhi.sogou.com/images/2012/03/24/76954.jpg',
          'trueImageSrc':'http://dl.bizhi.sogou.com/images/2012/03/24/76954.jpg',
          'title':'森林风格',
          'expanded':false
        },
       
        {
          'id':4,
          'des':'测试图片二',
          'logoImageSrc':'http://dl.bizhi.sogou.com/images/2012/03/24/76954.jpg',
          'trueImageSrc':'http://dl.bizhi.sogou.com/images/2012/03/24/76954.jpg',
          'title':'森林风格',
          'expanded':false
        } ,
        {
           id:3,
          'des':'测试图片一',
          'logoImageSrc':'http://image.tianjimedia.com/uploadImages/2012/010/XC4Y39BYZT9A.jpg',
          'trueImageSrc':'http://image.tianjimedia.com/uploadImages/2012/010/XC4Y39BYZT9A.jpg',
          'title':'沙漠风格',
          'expanded':false
        }
      ]
    }
  }

 handleBackImage(src){

    let newStyles= Object.assign({}, this.props.componentStyles, { backgroundImage:'url(' +src + ')' }) 
    this.props.componentSetStyle(this.props.pageId,newStyles)


 }

  render() {
    let imageList=this.state.imageList
    // imageList=imageList.map((image)=>{
    //   //    return state.map(cpt =>
    //   //   cpt.pageId === action.pageId ?
    //   //     Object.assign({}, cpt, { backgroundImage: action.backgroundImage }) :
    //   //     cpt
    //   // )
    //   return Object.assign({}, image, { expanded: false })
    // })

    return (
       <div>
            {imageList.map((image)=>{  
         return(
                    <Card key={image.id}  >
                        <CardHeader
                          id={image.id}
                          title={image.title}
                          subtitle={image.des}
                          avatar={image.logoImageSrc}
                          actAsExpander={true}
                          showExpandableButton={true}
                        />
                        <CardMedia expandable={true}
                                       overlay={<CardTitle title={image.title} subtitle={image.des} />}
                                       onClick={()=>{this.handleBackImage(image.trueImageSrc)}}
                        
                        >
                          <img src={image.trueImageSrc}   />
                        </CardMedia>
                        <CardText expandable={true} >
                         {image.des}
                        </CardText>
                       
                      </Card>
                
                      )
       })}
       </div>
    
       
    )
  }
}

ImageModal.propTypes = {
  componentSetStyle:PropTypes.func,
  componentStyles:PropTypes.object
}

export default ImageModal
